<template>
  <div class="blogBox">
    <el-form
      :model="blog"
      :rules="rules"
      ref="blog"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="blog.title"></el-input>
      </el-form-item>
      <el-form-item label="摘要" prop="summary">
        <el-input type="textarea" v-model="blog.summary"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <mavon-editor
          ref="md"
          :ishljs="true"
          class="mavonBox"
          v-model="blog.content"
          :toolbars="toolbars"
          @imgAdd="imgAdd"
          @change="change"
          @imgDel="imgDel"
        ></mavon-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('blog')">发布</el-button>
        <el-button @click="resetForm('blog')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddBlog",
  data() {
    return {
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: false, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: false, // 预览
      },
      blog: {
        id: "",
        title: "",
        summary: "",
        content: "",
      },
      image: {
        blogid: "",
      },

      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],

        summary: [{ required: true, message: "请填写摘要", trigger: "blur" }],
        content: [{ required: true, message: "请填写内容", trigger: "blur" }],
      },
    };
  },
	created() {
	  this.$axios.post("http://120.77.71.211:9011/api/createUUID").then((resp) => {
	    this.blog.id = resp.data.data;
	  });
	},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("http://120.77.71.211:9011/api/addBlog", this.blog)
            .then((resp) => {
              if (resp.data.code == 200) {
				  this.$router.replace("/home");
                this.$message({
                  message: resp.data.message,
                  type: "success",
                });
              } else {
                this.$message.error(resp.data.message);
              }
              
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 绑定@imgAdd event
    imgAdd(pos, file) {
      this.image.blogid = this.blog.id;
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append("file", file);
      formData.append("blogid", this.image.blogid);
      var _this = this;
      this.$axios({
        method: "post",
        url: "http://120.77.71.211:9011/api/upload",
        data: formData,
        headers: {
          "content-type": "multipart/form-data",
        },
      }).then((resp) => {
        if (resp.data.code == 200) {
          this.$message({
            message: resp.data.message,
            type: "success",
          });
        } else {
          this.$message.error(resp.data.message);
        }
        this.$refs.md.$img2Url(pos, resp.data.data);
      });
    },
    change(value, render) {
      this.html = render;
    },
    imgDel(pos) {
      var formdata = new FormData();
      formdata.append("url", pos[0]);

      this.$axios({
        method: "post",
        url: "http://120.77.71.211:9011/api/deleteImage",
        data: formdata,
        headers: {
          "content-type": "multipart/form-data",
        },
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch((res) => {
          console.log(res);
        });
    },
  },
  
};
</script>

<style scoped>
.blogBox {
  text-align: left;
  margin: 20px auto;
  margin-left: 30px;
  width: 1200px;
}
.mavonBox {
  height: 500px;
}
</style>